﻿<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="description" content="bootstrap default admin template">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Buttons | Prince Admin Template</title>


        <!-- Start global css -->
        <link rel="stylesheet" href="../../assets/global/plugins/Waves/dist/waves.min.css"/>
        <link rel="stylesheet" href="../../assets/global/plugins/bootstrap/dist/css/bootstrap.min.css"/>
        <link rel="stylesheet" href="../../assets/icons_fonts/font-awesome/css/font-awesome.min.css"/>
        <!-- End global css -->

        <!-- Start page plugin css -->

        <!-- End page plugin css -->

        <!-- Start template global css -->
        <link href="../../assets/global/css/components.min.css" type="text/css" rel="stylesheet"/>
        <!-- End template global css -->

        <!-- Start layout css -->
        <link rel="stylesheet" href="../../assets/layouts/layouts_left_menu/left_menu_layout.min.css"/>
        <!-- End layout css -->

    <!-- Start favicon ico -->
    <link rel="icon" href="../../assets/favicon/prince.ico" type="image/x-icon"/>
    <link rel="icon" type="image/png" sizes="192x192" href="../../assets/favicon/prince-192x192.png">
    <link rel="apple-touch-icon" sizes="180x180" href="../../assets/favicon/prince-180x180.png">
    <!-- End favicon ico -->

    </head>
    <body class="nav-medium">
    <div class="container body">
        <div class="main_container">
            <!-- Start header -->
            <!-- Start Loader -->
<div class="page-loader">
    <div class="preloader loading">
        <span class="slice"></span>
        <span class="slice"></span>
        <span class="slice"></span>
        <span class="slice"></span>
        <span class="slice"></span>
        <span class="slice"></span>
    </div>
</div>
<!-- End Loader -->

<!-- Start Scroll Top -->
<a href="javascript:" id="scroll" style="display: none;"><span></span></a>
<!-- End Scroll Top -->

<!-- start Left Menu-->
<div class="col-md-3 left_color">
    <div class="left_color scroll-view">
        <div class="navbar nav_title">
            <a href="index.html" class="medium-logo">
                <img src="../../assets/global/images/prince_logo.png" alt="medium-logo">
            </a>
            <a href="index.html" class="small-logo">
                <img src="../../assets/global/images/prince_logo2.png" alt="small-logo">
            </a>
        </div>

        <div class="clearfix"></div>

        <!-- sidebar menu -->
        <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
            <div class="menu_section">
                <h3>General</h3>
                <ul class="nav side-menu">
                    <li><a class="waves-effect waves-light" href="index.html"><i class="fa fa-home"></i> Dashboard</a></li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-desktop"></i>Basic UI Elements <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li> <a class="waves-effect waves-light" href="accordions.html">Accordions</a></li>
                            <li> <a class="waves-effect waves-light" href="buttons.html">Buttons</a></li>
                            <li> <a class="waves-effect waves-light" href="dropdowns.html">Dropdowns</a></li>
                            <li> <a class="waves-effect waves-light" href="modals.html">Modals</a></li>
                            <li> <a class="waves-effect waves-light" href="modals_animation.html">Modals Animation</a></li>
                            <li><a class="waves-effect waves-light" href="list.html">List</a></li>
                            <li> <a class="waves-effect waves-light" href="progressbar.html">Progress bar</a></li>
                            <li> <a class="waves-effect waves-light" href="tabs.html">Tabs</a></li>
                            <li> <a class="waves-effect waves-light" href="typography.html">Typography</a></li>
                            <li> <a class="waves-effect waves-light" href="tooltip_popover.html">Tooltips & Popover</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-cube"></i>Advanced Elements <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li> <a class="waves-effect waves-light" href="alerts.html">Alerts</a></li>
                            <li> <a class="waves-effect waves-light" href="custom_scroll.html">Custom scroll</a></li>
                            <li> <a class="waves-effect waves-light" href="timeline.html">Timeline</a></li>
                            <li> <a class="waves-effect waves-light" href="carousel.html">Carousel</a></li>
                        </ul>
                    </li>
                    <li><a  class="waves-effect waves-light"><i class="fa fa-edit"></i> Forms <span class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="general_elements.html">General Elements</a></li>
                            <li><a class="waves-effect waves-light" href="form_input.html">Form Input</a></li>
                            <li><a class="waves-effect waves-light" href="form_validation.html">Form Validation</a></li>
                            <li><a class="waves-effect waves-light" href="form_mask.html">Form Mask</a></li>
                            <li><a class="waves-effect waves-light" href="form_layouts.html">Form Layouts</a></li>
                            <li><a class="waves-effect waves-light" href="form_wizard.html">Form Wizard</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light" href="sweetalerts.html"><i class="fa fa-window-maximize"></i> Popups</a></li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-table"></i> Tables <span class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="basic_table.html">Basic Table</a></li>
                            <li><a class="waves-effect waves-light" href="edit_table.html">Edit Table</a></li>
                            <li><a class="waves-effect waves-light" href="basic_datatable.html">Basic Datatable</a></li>
                            <li><a class="waves-effect waves-light" href="advanced_datatable.html">Advanced Datatable</a></li>
                            <li><a class="waves-effect waves-light" href="api_datatable.html">API Datatable</a></li>
                            <li><a class="waves-effect waves-light" href="styling_datatable.html">Styling Datatable</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-bar-chart-o"></i> Charts <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="morris_chart.html">Morris Chart</a></li>
                            <li><a class="waves-effect waves-light" href="sparkline_chart.html">Sparkline Chart</a></li>
                            <li><a class="waves-effect waves-light" href="chartist_chart.html">Chartist</a></li>
                            <li><a class="waves-effect waves-light" href="chart_js.html">Chart.js</a></li>
                            <li><a class="waves-effect waves-light" href="easy_pie_chart.html">Easy Pie Chart</a></li>
                            <li><a class="waves-effect waves-light" href="rickshaw_chart.html">Rickshaw Chart</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="menu_section">
                <h3>Live On</h3>
                <ul class="nav side-menu">
                    <li><a class="waves-effect waves-light"><i class="fa fa-anchor"></i> Icons <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="font_awesome.html">Font awesome</a></li>
                            <li><a class="waves-effect waves-light" href="material_icon.html">Material icon</a></li>
                            <li><a class="waves-effect waves-light" href="themify_icon.html">Themify icon</a></li>
                            <li><a class="waves-effect waves-light" href="flag_icon.html">Flag icon</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-map-marker"></i> Maps <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="map-google.html">Google Maps</a></li>
                            <li><a class="waves-effect waves-light" href="map-vector.html">Vector Map</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-user-circle-o"></i> User Pages <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="user_login_v1.html">Login 1</a></li>
                            <li><a class="waves-effect waves-light" href="user_login_v2.html">Login 2</a></li>
                            <li><a class="waves-effect waves-light" href="user_register_v1.html">Register 1</a></li>
                            <li><a class="waves-effect waves-light" href="user_register_v2.html">Register 2</a></li>
                            <li><a class="waves-effect waves-light" href="user_forgot_password_v1.html">Forgot 1</a></li>
                            <li><a class="waves-effect waves-light" href="user_forgot_password_v2.html">Forgot 2</a></li>
                            <li><a class="waves-effect waves-light" href="user_lockscreen_v1.html">Lockscreen 1</a></li>
                            <li><a class="waves-effect waves-light" href="user_lockscreen_v2.html">Lockscreen 2</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-exclamation-circle"></i> Error Pages <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="user_404.html">Error 404</a></li>
                            <li><a class="waves-effect waves-light" href="user_400.html">Error 400</a></li>
                            <li><a class="waves-effect waves-light" href="user_403.html">Error 403</a></li>
                            <li><a class="waves-effect waves-light" href="user_405.html">Error 405</a></li>
                            <li><a class="waves-effect waves-light" href="user_500.html">Error 500</a></li>
                            <li><a class="waves-effect waves-light" href="user_503.html">Error 503</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-balance-scale"></i> General Pages <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="faq.html">FAQ</a></li>
                            <li><a class="waves-effect waves-light" href="userlist.html">User List</a></li>
                            <li><a class="waves-effect waves-light" href="invoice.html">Invoice</a></li>
                            <li><a class="waves-effect waves-light" href="blank.html">Blank</a></li>
                            <li><a class="waves-effect waves-light" href="profile.html">Profile</a></li>
                            <li><a class="waves-effect waves-light" href="gallery.html">Gallery</a></li>
                            <li><a class="waves-effect waves-light" href="maintenance.html">Maintenance</a></li>
                            <li><a class="waves-effect waves-light" href="draggable_grid.html">Draggable Grid</a></li>
                            <li><a class="waves-effect waves-light" href="grids.html">Grids</a></li>
                            <li><a class="waves-effect waves-light" href="search_results.html">Search result</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light" href="documentation.html"><i class="fa fa-cogs"></i> Documentation</a></li>
                </ul>
            </div>

        </div>
        <!-- /sidebar menu -->

        <!-- /menu footer buttons -->
        <div class="sidebar-footer hidden-small">
            <a data-toggle="tooltip" data-placement="top" title="Settings">
                <span class="fa fa-cog" aria-hidden="true"></span>
            </a>
            <a class="toggle-fullscreen" data-toggle="tooltip" data-placement="top" title="FullScreen">
                <span class="fa fa-arrows-alt" aria-hidden="true"></span>
            </a>
            <a data-toggle="tooltip" data-placement="top" title="Lock">
                <span class="fa fa-lock" aria-hidden="true"></span>
            </a>
            <a data-toggle="tooltip" data-placement="top" title="Logout" href="login.html">
                <span class="fa fa-power-off" aria-hidden="true"></span>
            </a>
        </div>
        <!-- /menu footer buttons -->
    </div>
</div>
<!-- End Left Menu -->

<!-- start top navigation -->
<div class="top_nav">
    <div class="nav_menu">
        <nav>
            <div class="nav toggle">
                <a id="menu_toggle"><i class="fa fa-bars"></i></a>
                <div class="responsive-logo">
                    <a href="index.html">
                        <img src="../../assets/global/images/prince_logo.png" alt="main-logo">
                    </a>
                </div>
            </div>

            <div class="topbar-right">
                <div class="nav navbar-nav navbar-right">

                    <div class="header-search right-icon">
                        <form role="search" class="search-box">
                            <input placeholder="Search..." class="form-control" type="text">
                            <a href="javascript:">
                                <i class="fa fa-search"></i>
                            </a>
                        </form>
                    </div>

                    <div class="dropdown header-notification right-icon">
                        <a href="javascript:" class="dropdown-toggle waves-effect waves-light notification-icon"
                           data-toggle="dropdown" aria-expanded="false">
                            <i class="fa fa-bell-o" aria-hidden="true"></i>
                            <span class="label label-danger">4</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="text-center">
                                <p class="notification-title">Notification<span
                                            class="label label-primary">4</span></p>
                            </li>
                            <li class="list-group default-scroll">
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user1.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Domance Den</span> posted a photo on
                                                your wall.</h5>
                                        </div>
                                    </div>
                                </a>
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user2.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Wikko Menta</span> commented on your
                                                last video.</h5>
                                        </div>
                                    </div>
                                </a>
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user3.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Jonny Sem</span> posted 4 comments
                                                on your photo.</h5>
                                        </div>
                                    </div>
                                </a>
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user4.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Doli Senga</span> posted a photo on
                                                your wall.</h5>
                                        </div>
                                    </div>
                                </a>
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user5.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Bhura Kenta</span> commented on your
                                                last video.</h5>
                                        </div>
                                    </div>
                                </a>
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user6.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Jolly Baby</span> posted 2 comments
                                                on your photo.</h5>
                                        </div>
                                    </div>
                                </a>

                            </li>
                            <li class="all-notification">
                                <a href="javascript:;" class="list-group-item text-right">
                                    <small>See all notifications</small>
                                </a>
                            </li>
                        </ul>
                    </div>

                    <div class="header-fullscreen right-icon">
                        <a href="javascript:" class="waves-effect waves-light toggle-fullscreen">
                            <i class="fa fa-arrows-alt" aria-hidden="true"></i>
                        </a>
                    </div>

                    <!--<div class="header-chat right-icon">
                        <a href="javascript:" class="waves-effect waves-light">
                            <i class="fa fa-comments-o" aria-hidden="true"></i>
                        </a>
                    </div>-->

                    <div class="dropdown user-profile right-icon">
                        <a href="javascript:" class="dropdown-toggle waves-effect waves-light"
                           data-toggle="dropdown"
                           aria-expanded="false">
                            <img src="../../assets/global/images/user10.jpg" alt="user">
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="javascript:" class="waves-effect waves-light">
                                    <i class="fa fa-user" aria-hidden="true"></i>Profile</a>
                            </li>
                            <li><a href="javascript:" class="waves-effect waves-light">
                                    <i class="fa fa-cog" aria-hidden="true"></i>Settings</a>
                            </li>
                            <li><a href="javascript:" class="waves-effect waves-light">
                                    <i class="fa fa-lock" aria-hidden="true"></i>Lock screen</a>
                            </li>
                            <li role="separator" class="divider"></li>
                            <li><a href="javascript:" class="waves-effect waves-light">
                                    <i class="fa fa-power-off text-danger" aria-hidden="true"></i> Logout</a>
                            </li>
                        </ul>
                    </div>

                </div>

            </div>
        </nav>
    </div>
</div>
<div class="clearfix"></div>
<!-- End top navigation -->
            <!-- End header -->
            <!-- Start Contain Section -->
            <div class="container-fluid right_color">
                <div class="page-main-header">
                    <!-- Page Title -->
                    <h2 class="page-name-title">Buttons</h2>
                    <!--  Breadcrumb -->
                    <ol class="breadcrumb">
                        <li><a href="#">Home</a></li>
                        <li class="text-info">Components</li>
                        <li class="active">Buttons</li>
                    </ol>
                </div>

                <div class="contain-section button-page-section">
                    <div class="contain-inner-section">
                        <!-- Start container -->
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                <div class="section-header">
                                    <h2>Default Buttons</h2>
                                    <p>Using color to add meaning to a button only provides a visual indication. </p>
                                </div>
                                <div class="section-body">
                                    <button type="button" class="btn btn-default float-button-light">Default</button>
                                    <button type="button" class="btn btn-primary float-button-light">Primary</button>
                                    <button type="button" class="btn btn-success float-button-light">Success</button>
                                    <button type="button" class="btn btn-info float-button-light">Info</button>
                                    <button type="button" class="btn btn-warning float-button-light">Warning</button>
                                    <button type="button" class="btn btn-danger float-button-light">Danger</button>
                                    <button type="button" class="btn btn-purple float-button-light">Purple</button>
                                    <button type="button" class="btn btn-pink float-button-light">Pink</button>
                                    <button type="button" class="btn btn-inverse float-button-light">Inverse</button>
                                </div>
                            </div>

                            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                <div class="section-header">
                                    <h2>Border Button</h2>
                                    <p>Use a classes <code>.btn-outline</code> to quickly create a outline.  </p>
                                </div>
                                <div class="section-body">
                                    <button type="button" class="btn btn-default btn-outline float-button-light">Default</button>
                                    <button type="button" class="btn btn-primary btn-outline float-button-light">Primary</button>
                                    <button type="button" class="btn btn-success btn-outline float-button-light">Success</button>
                                    <button type="button" class="btn btn-info btn-outline float-button-light">Info</button>
                                    <button type="button" class="btn btn-warning btn-outline float-button-light">Warning</button>
                                    <button type="button" class="btn btn-danger btn-outline float-button-light">Danger</button>
                                    <button type="button" class="btn btn-purple btn-outline float-button-light">Purple</button>
                                    <button type="button" class="btn btn-pink btn-outline float-button-light">Pink</button>
                                    <button type="button" class="btn btn-inverse btn-outline float-button-light">Inverse</button>
                                </div>
                            </div>

                            <div class="clearfix"></div>

                            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                <div class="section-header">
                                    <h2>Button With Size</h2>
                                    <p>Size might vary from smaller screen to a larger screen. We made few sizes that are pixel perfect and responsive.</p>
                                </div>
                                <div class="section-body">
                                    <button type="button" class="btn btn-primary btn-lg float-button-light">Large Button</button>
                                    <button type="button" class="btn btn-primary float-button-light">Default Button</button>
                                    <button type="button" class="btn btn-primary btn-sm float-button-light">Small Button</button>
                                    <button type="button" class="btn btn-primary btn-xs float-button-light">Tiny Button</button>
                                </div>
                            </div>

                            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                <div class="section-header">
                                    <h2>Buttons With Animated Icon</h2>
                                    <p>Basic buttons are traditional buttons with borders and background with an extra commponent like an icon.</p>
                                </div>
                                <div class="section-body">
                                    <button type="button" class="btn btn-primary effect effect-1 float-button-light">Learn More</button>
                                    <button type="button" class="btn btn-primary effect effect-2 float-button-light">Learn More</button>
                                    <button type="button" class="btn btn-primary effect effect-3 float-button-light">Learn More</button>
                                    <button type="button" class="btn btn-primary effect effect-4 float-button-light">Learn More</button>
                                    <button type="button" class="btn btn-primary effect effect-5 float-button-light">Learn More</button>
                                </div>
                            </div>

                            <div class="clearfix"></div>

                            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                <div class="section-header">
                                    <h2>Block Button</h2>
                                    <p>A block level button spans the entire width of the parent element, with by adding add <code>.btn-block</code>.</p>
                                </div>
                                <div class="section-body">
                                    <button type="button" class="btn btn-block btn-primary float-button-light">Search</button>
                                    <button type="button" class="btn btn-block btn-purple float-button-light">Read more</button>
                                </div>
                            </div>

                            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                <div class="section-header">
                                    <h2>Active/Disabled buttons</h2>
                                    <p>if you need to force the same appearance, go ahead and add <code>.active</code> and Make buttons look unclickable by fading them back with opacity.</p>
                                </div>
                                <div class="section-body">
                                    <button type="button" class="btn btn-primary active float-button-light">Active Button</button>
                                    <button type="button" class="btn btn-pink float-button-light" disabled="disabled">Disabled Button</button>
                                </div>
                           </div>

                            <div class="clearfix"></div>

                            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                <div class="section-header">
                                    <h2>Button hover border style</h2>
                                    <p>You can use different type of button hover border effects.</p>
                                </div>
                                <div class="section-body">
                                    <button type="button" class="btn btn-primary border-solid float-button-light">Hover Me</button>
                                    <button type="button" class="btn btn-primary border-dashed float-button-light">Hover Me</button>
                                    <button type="button" class="btn btn-primary border-dotted float-button-light">Hover Me</button>
                                    <button type="button" class="btn btn-primary border-double float-button-light">Hover Me</button>
                                    <button type="button" class="btn btn-primary border-inset float-button-light">Hover Me</button>
                                </div>
                            </div>

                            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                <div class="section-header">
                                    <h2>Button left or right</h2>
                                    <p>Create a button like left and right with rounded.</p>
                                </div>
                                <div class="section-body">
                                    <button type="button" class="btn btn-success button-left-round float-button-light">Left Round</button>
                                    <button type="button" class="btn btn-primary button-right-round float-button-light">Right Round</button>
                                </div>
                            </div>

                            <div class="clearfix"></div>
                            <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                                <div class="section-header">
                                    <h2>Checkbox</h2>
                                    <p>Use material style checkbox.</p>
                                </div>
                                <div class="section-body">
                                    <div class="material-design-checkobx">
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox"><i class="helper"></i>Checkbox 1
                                            </label>
                                        </div>
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox"><i class="helper"></i>Checkbox 2
                                            </label>
                                        </div>
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox"><i class="helper"></i>Checkbox 3
                                            </label>
                                        </div>
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox"><i class="helper"></i>Checkbox 4
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                                <div class="section-header">
                                    <h2>Radio Button</h2>
                                    <p>Use material style radio button.</p>
                                </div>
                                <div class="section-body">
                                    <div class="form-radio">
                                        <div class="radio-button">
                                            <label>
                                                <input type="radio" checked="checked" name="radio"><i class="helper"></i>Radio button 1
                                            </label>
                                        </div>
                                        <div class="radio-button">
                                            <label>
                                                <input type="radio" name="radio"><i class="helper"></i>Radio button 2
                                            </label>
                                        </div>
                                        <div class="radio-button">
                                            <label>
                                                <input type="radio" name="radio"><i class="helper"></i>Radio button 3
                                            </label>
                                        </div>
                                        <div class="radio-button">
                                            <label>
                                                <input type="radio" name="radio"><i class="helper"></i>Radio button 4
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                                <div class="section-header">
                                    <h2>Button With switcher</h2>
                                    <p>You can use different color type of toggle switcher.</p>
                                </div>
                                <div class="section-body">
                                    <label class="switcher">
                                        <input type="checkbox">
                                        <span class="switcher-indicator"></span>
                                    </label>
                                    <label class="switcher">
                                        <input type="checkbox" checked>
                                        <span class="switcher-indicator"></span>
                                    </label>
                                    <label class="switcher">
                                        <input type="checkbox" checked>
                                        <span class="switcher-indicator success-switcher"></span>
                                    </label>
                                    <label class="switcher">
                                        <input type="checkbox" checked>
                                        <span class="switcher-indicator info-switcher"></span>
                                    </label>
                                    <label class="switcher">
                                        <input type="checkbox" checked>
                                        <span class="switcher-indicator warning-switcher"></span>
                                    </label>
                                    <label class="switcher">
                                        <input type="checkbox" checked>
                                        <span class="switcher-indicator danger-switcher"></span>
                                    </label>
                                    <label class="switcher">
                                        <input type="checkbox" checked>
                                        <span class="switcher-indicator purple-switcher"></span>
                                    </label>
                                    <label class="switcher">
                                        <input type="checkbox" checked>
                                        <span class="switcher-indicator pink-switcher"></span>
                                    </label>
                                </div>
                            </div>

                            <div class="clearfix"></div>

                            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                <div class="section-header">
                                    <h2>Button With Icon</h2>
                                    <p>Button with left aligned icon.</p>
                                </div>
                                <div class="section-body">
                                    <button type="button" class="btn btn-purple float-button-light"><i class="icon_upload" aria-hidden="true"></i> Upload</button>
                                    <button type="button" class="btn btn-pink float-button-light"><i class="icon_like_alt" aria-hidden="true"></i> I like</button>
                                    <button type="button" class="btn btn-success float-button-light"><i class="icon_check" aria-hidden="true"></i> I agree</button>
                                    <button type="button" class="btn btn-primary float-button-light"><i class="icon_plus" aria-hidden="true"></i> More</button>
                                    <button type="button" class="btn btn-danger float-button-light"><i class="icon_link" aria-hidden="true"></i> Link</button>
                                    <button type="button" class="btn btn-info float-button-light"><i class="icon_comment" aria-hidden="true"></i> Comment</button>
                                </div>
                            </div>

                            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                <div class="section-header">
                                    <h2>Button with pagination</h2>
                                    <p>pagination links for your site or app with the multi-page pagination component.</p>
                                </div>
                                <div class="section-body">
                                    <div class="btn-group" data-toggle="buttons">
                                        <button type="button" class="btn btn-primary float-button-light"><i class="fa fa-angle-double-left"></i></button>
                                        <button type="button" class="btn btn-primary float-button-light">1</button>
                                        <button type="button" class="btn btn-primary float-button-light">2</button>
                                        <button type="button" class="btn btn-primary float-button-light">3</button>
                                        <button type="button" class="btn btn-primary float-button-light">4</button>
                                        <button type="button" class="btn btn-primary float-button-light"><i class="fa fa-angle-double-right"></i></button>
                                    </div>
                                    <div class="btn-group" data-toggle="buttons">
                                        <button type="button" class="btn btn-inverse float-button-light"><i class="fa fa-angle-double-left"></i></button>
                                        <button type="button" class="btn btn-inverse float-button-light">1</button>
                                        <button type="button" class="btn btn-inverse float-button-light">2</button>
                                        <button type="button" class="btn btn-inverse float-button-light">3</button>
                                        <button type="button" class="btn btn-inverse float-button-light">4</button>
                                        <button type="button" class="btn btn-inverse float-button-light"><i class="fa fa-angle-double-right"></i></button>
                                    </div>
                                    <div class="btn-group" data-toggle="buttons">
                                        <button type="button" class="btn btn-pink float-button-light"><i class="fa fa-angle-double-left"></i></button>
                                        <button type="button" class="btn btn-pink float-button-light">1</button>
                                        <button type="button" class="btn btn-pink float-button-light">2</button>
                                        <button type="button" class="btn btn-pink float-button-light">3</button>
                                        <button type="button" class="btn btn-pink float-button-light">4</button>
                                        <button type="button" class="btn btn-pink float-button-light"><i class="fa fa-angle-double-right"></i></button>
                                    </div>
                                    <div class="btn-group" data-toggle="buttons">
                                        <button type="button" class="btn btn-purple float-button-light"><i class="fa fa-angle-double-left"></i></button>
                                        <button type="button" class="btn btn-purple float-button-light">1</button>
                                        <button type="button" class="btn btn-purple float-button-light">2</button>
                                        <button type="button" class="btn btn-purple float-button-light">3</button>
                                        <button type="button" class="btn btn-purple float-button-light">4</button>
                                        <button type="button" class="btn btn-purple float-button-light"><i class="fa fa-angle-double-right"></i></button>
                                    </div>
                                </div>
                            </div>

                            <div class="clearfix"></div>
                            <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                                <div class="section-header">
                                    <h2>Border Social Icons</h2>
                                    <p>You can use different type of icon with only border.</p>
                                </div>
                                <div class="section-body">
                                    <button type="button" class="btn btn-social-icon float-button-light social-android"><i class="fa fa-android"></i></button>
                                    <button type="button" class="btn btn-social-icon float-button-light social-edge"><i class="fa fa-edge"></i></button>
                                    <button type="button" class="btn btn-social-icon float-button-light social-jsfiddle"><i class="fa fa-jsfiddle"></i></button>
                                    <button type="button" class="btn btn-social-icon float-button-light social-opera"><i class="fa fa-opera"></i></button>
                                    <button type="button" class="btn btn-social-icon float-button-light social-reddit"><i class="fa fa-reddit"></i></button>
                                    <button type="button" class="btn btn-social-icon float-button-light social-android"><i class="fa fa-share-alt"></i></button>
                                    <button type="button" class="btn btn-social-icon float-button-light social-android"><i class="fa fa-whatsapp"></i></button>
                                    <button type="button" class="btn btn-social-icon float-button-light social-reddit"><i class="fa fa-wpbeginner"></i></button>
                                    <button type="button" class="btn btn-social-icon float-button-light social-opera"><i class="fa fa-youtube"></i></button>
                                    <button type="button" class="btn btn-social-icon float-button-light social-edge"><i class="fa fa-windows"></i></button>
                                    <button type="button" class="btn btn-social-icon float-button-light social-opera"><i class="fa fa-tumblr"></i></button>
                                    <button type="button" class="btn btn-social-icon float-button-light social-edge"><i class="fa fa-twitter"></i></button>
                                    <button type="button" class="btn btn-social-icon float-button-light social-opera"><i class="fa fa-pinterest-p"></i></button>
                                    <button type="button" class="btn btn-social-icon float-button-light social-android"><i class="fa fa-weixin"></i></button>
                                </div>
                            </div>

                            <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                                <div class="section-header">
                                    <h2>Background Social Icons</h2>
                                    <p>You can use different type of icon with background.</p>
                                </div>
                                <div class="section-body">
                                    <button type="button" class="btn btn-social-icon float-button-light social-amazon"><i class="fa fa-amazon"></i></button>
                                    <button type="button" class="btn btn-social-icon float-button-light social-dribbble"><i class="fa fa-dribbble"></i></button>
                                    <button type="button" class="btn btn-social-icon float-button-light social-facebook"><i class="fa fa-facebook"></i></button>
                                    <button type="button" class="btn btn-social-icon float-button-light social-drupal"><i class="fa fa-drupal"></i></button>
                                    <button type="button" class="btn btn-social-icon float-button-light social-flickr"><i class="fa fa-flickr"></i></button>
                                    <button type="button" class="btn btn-social-icon float-button-light social-forumbee"><i class="fa fa-forumbee"></i></button>
                                    <button type="button" class="btn btn-social-icon float-button-light social-github"><i class="fa fa-github"></i></button>
                                    <button type="button" class="btn btn-social-icon float-button-light social-googleplus"><i class="fa fa-google-plus"></i></button>
                                    <button type="button" class="btn btn-social-icon float-button-light social-html5"><i class="fa fa-html5"></i></button>
                                    <button type="button" class="btn btn-social-icon float-button-light social-instagram"><i class="fa fa-instagram"></i></button>
                                    <button type="button" class="btn btn-social-icon float-button-light social-linkedin"><i class="fa fa-linkedin"></i></button>
                                    <button type="button" class="btn btn-social-icon float-button-light social-maxcdn"><i class="fa fa-maxcdn"></i></button>
                                    <button type="button" class="btn btn-social-icon float-button-light social-github"><i class="fa fa-mixcloud"></i></button>
                                    <button type="button" class="btn btn-social-icon float-button-light social-maxcdn"><i class="fa fa-odnoklassniki"></i></button>
                                    <button type="button" class="btn btn-social-icon float-button-light social-linkedin"><i class="fa fa-paypal"></i></button>
                                </div>
                            </div>

                            <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                                <div class="section-header">
                                    <h2>Round Social Icons</h2>
                                    <p>You can use different type of icon with round.</p>
                                </div>
                                <div class="section-body">
                                    <button type="button" class="btn btn-social-icon btn-round float-button-light social-pinterest"><i class="fa fa-pinterest-p"></i></button>
                                    <button type="button" class="btn btn-social-icon btn-round float-button-light social-github"><i class="fa fa-tumblr"></i></button>
                                    <button type="button" class="btn btn-social-icon btn-round float-button-light social-skype"><i class="fa fa-skype"></i></button>
                                    <button type="button" class="btn btn-social-icon btn-round float-button-light social-linkedin"><i class="fa fa-slideshare"></i></button>
                                    <button type="button" class="btn btn-social-icon btn-round float-button-light social-snapchat"><i class="fa fa-snapchat-ghost"></i></button>
                                    <button type="button" class="btn btn-social-icon btn-round float-button-light social-amazon"><i class="fa fa-stack-overflow"></i></button>
                                    <button type="button" class="btn btn-social-icon btn-round float-button-light social-github"><i class="fa fa-steam"></i></button>
                                    <button type="button" class="btn btn-social-icon btn-round float-button-light social-skype"><i class="fa fa-telegram"></i></button>
                                    <button type="button" class="btn btn-social-icon btn-round float-button-light social-twitter"><i class="fa fa-twitter"></i></button>
                                    <button type="button" class="btn btn-social-icon btn-round float-button-light social-maxcdn"><i class="fa fa-stumbleupon"></i></button>
                                    <button type="button" class="btn btn-social-icon btn-round float-button-light social-skype"><i class="fa fa-vimeo"></i></button>
                                    <button type="button" class="btn btn-social-icon btn-round float-button-light social-forumbee"><i class="fa fa-weixin"></i></button>
                                    <button type="button" class="btn btn-social-icon btn-round float-button-light social-github"><i class="fa fa-wikipedia-w"></i></button>
                                    <button type="button" class="btn btn-social-icon btn-round float-button-light social-instagram"><i class="fa fa-yahoo"></i></button>
                                    <button type="button" class="btn btn-social-icon btn-round float-button-light social-github"><i class="fa fa-xing"></i></button>
                                </div>
                            </div>

                            <div class="clearfix"></div>

                            <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                                <div class="section-header">
                                    <h2>Social Buttons</h2>
                                    <p>You can use different type of icon with round.</p>
                                </div>
                                <div class="section-body">
                                    <button type="button" class="btn btn-social-icon social-icon-name float-button-light social-facebook"><i class="fa fa-facebook"></i>Facebook</button>
                                    <button type="button" class="btn btn-social-icon social-icon-name float-button-light social-twitter"><i class="fa fa-twitter"></i>Twitter</button>
                                    <button type="button" class="btn btn-social-icon social-icon-name float-button-light social-linkedin"><i class="fa fa-linkedin"></i>Iinkedin</button>
                                    <button type="button" class="btn btn-social-icon social-icon-name float-button-light social-instagram"><i class="fa fa-instagram"></i>Instagram</button>
                                    <button type="button" class="btn btn-social-icon social-icon-name float-button-light social-googleplus"><i class="icon social_googleplus"></i>Google+</button>
                                    <button type="button" class="btn btn-social-icon social-icon-name float-button-light social-flickr"><i class="fa fa-flickr"></i>Flickr</button>
                                </div>
                            </div>

                            <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                                <div class="section-header">
                                    <h2>Vertical Button Group</h2>
                                    <p>You can use vertical button group.</p>
                                </div>
                                <div class="section-body">
                                    <div class="btn-group-vertical float-xs-left" data-toggle="buttons">
                                        <button type="button" class="btn btn-primary"><i class="fa fa-check"></i></button>
                                        <button type="button" class="btn btn-primary"><i class="fa fa-trash-o"></i></button>
                                        <button type="button" class="btn btn-primary"><i class="fa fa-cogs"></i></button>
                                    </div>
                                    <div class="btn-group-vertical float-xs-left" data-toggle="buttons">
                                        <button type="button" class="btn btn-primary">Check</button>
                                        <button type="button" class="btn btn-primary">Remove</button>
                                        <button type="button" class="btn btn-primary">Setting</button>
                                    </div>
                                    <div class="btn-group-vertical float-xs-left" data-toggle="buttons">
                                        <button type="button" class="btn btn-primary"><i class="fa fa-check"></i> Check</button>
                                        <button type="button" class="btn btn-primary"><i class="fa fa-trash-o"></i> Remove</button>
                                        <button type="button" class="btn btn-primary"><i class="fa fa-cogs"></i> Setting</button>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                                <div class="section-header">
                                    <h2>Horizontal Button Group</h2>
                                    <p>You can use horizontal button group.</p>
                                </div>
                                <div class="section-body">
                                    <div class="btn-group float-xs-left" data-toggle="buttons">
                                        <button type="button" class="btn btn-primary"><i class="fa fa-check"></i></button>
                                        <button type="button" class="btn btn-primary"><i class="fa fa-trash-o"></i></button>
                                        <button type="button" class="btn btn-primary"><i class="fa fa-cogs"></i></button>
                                    </div>
                                    <div class="btn-group float-xs-left" data-toggle="buttons">
                                        <button type="button" class="btn btn-primary">Check</button>
                                        <button type="button" class="btn btn-primary">Remove</button>
                                        <button type="button" class="btn btn-primary">Setting</button>
                                    </div>
                                    <div class="btn-group float-xs-left" data-toggle="buttons">
                                        <button type="button" class="btn btn-primary"><i class="fa fa-check"></i> Check</button>
                                        <button type="button" class="btn btn-primary"><i class="fa fa-trash-o"></i> Remove</button>
                                        <button type="button" class="btn btn-primary"><i class="fa fa-cogs"></i> Setting</button>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <!-- End container -->
                    </div>
                </div>

            </div>
            <!-- End Contain Section -->    <!-- Start Footer Section -->    <footer class="footer">        © 2018 All rights reserved. Template designed by <a class="text-primary" href="http://www.bootstrapmb.com/">Prince</a>    </footer>    <!-- End Footer Section -->
        </div>
    </div>

        <!-- Start core js -->
        <script src="../../assets/global/plugins/jquery/dist/jquery.min.js"></script>
        <script src="../../assets/global/plugins/bootstrap/dist/js/bootstrap.min.js"></script>
        <script src="../../assets/global/plugins/Waves/dist/waves.min.js"></script>
        <script src="../../assets/global/plugins/screenfull.js/dist/screenfull.min.js"></script>
        <script src="../../assets/global/plugins/jquery-slimscroll/jquery.slimscroll.js"></script>
        <!-- Start core javascript -->

        <!-- Start global js -->
        <script src="../../assets/global/js/left-menu.min.js"></script>
        <!-- End global js -->



        <!-- Start page js -->

        <!-- End page js -->

    </body>
</html>